<template>
  <div>
    <sellDogs
      v-for="(item, index) in list"
      :key="index"
      :imgUrl="item.dogImgUrl"
      :name="item.dogName"
      @like="likeFn"
    ></sellDogs>

    <hr />
    <p>选择你喜欢的狗：</p>
    <ul>
      <li v-for="(item, index) in likeArr" :key="index">{{item}} </li>
    </ul>
  </div>
</template>

<script>
import sellDogs from "./components/sellDogs.vue";
export default {
  data() {
    return {
      likeArr:[],
      list: [
        {
          dogImgUrl:
            "http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg",
          dogName: "博美",
        },
        {
          dogImgUrl:
            "https://ts1.cn.mm.bing.net/th/id/R-C.71bd16bbef58520752275099f1dcf1f7?rik=ZeYjigvDu0pGBg&riu=http%3a%2f%2fwww.btbsm.com%2fuploads%2f2019-04-25%2f20190425203558462.jpg&ehk=bkSg%2bnYBHx2flovJib%2fGbTgSgQRfMyTP2rvj6ethIEc%3d&risl=&pid=ImgRaw&r=0",
          dogName: "泰迪",
        },
        {
          dogImgUrl:
            "https://ts1.cn.mm.bing.net/th/id/R-C.ac2a515900d48dabed5ac5fa57cde772?rik=2Nmz6A4w1HibWQ&riu=http%3a%2f%2fwww.baobeita.com%2fupload%2fimage%2fproduct%2f201404%2f10098201%2f552cc439-19f5-447d-8dae-8f2d2eb8b318-large.jpg&ehk=K0EyeTZ62oV9CiyWrrwnSh%2bJP2S9WoeAJ4GBMFcBgRY%3d&risl=&pid=ImgRaw&r=0",
          dogName: "金毛",
        },
        {
          dogImgUrl:
            "https://pic1.zhimg.com/80/v2-7ba4342e6fedb9c5f3726eb0888867da_1440w.jpg?source=1940ef5c",
          dogName: "哈士奇",
        },
        {
          dogImgUrl:
            "https://ts1.cn.mm.bing.net/th/id/R-C.45b95f44e7131d6a1bc79f5bc1435edc?rik=6SB%2ferDtzPKgqQ&riu=http%3a%2f%2fwww.baobeita.com%2fupload%2fimage%2fgoods%2f201303%2f100461%2fbig_06399904fee24099a29ccaaadf0f8ab8.jpg&ehk=LRVy7E%2f4qf9XLoAYHVBBLjZYDXftjQcnCdcGTFmhl9I%3d&risl=&pid=ImgRaw&r=0",
          dogName: "阿拉斯加",
        },
        {
          dogImgUrl:
            "https://ts1.cn.mm.bing.net/th/id/R-C.fa5a18c9b70412b4f390084a5edcad04?rik=oa8A3DH%2bp8JUmA&riu=http%3a%2f%2fwww.baobeita.com%2fupload%2fimage%2fproduct%2f201406%2f10104200%2f4d0a0021-d1f1-43ce-b94b-c1b556fd7e00-large.jpg&ehk=7r0rZlzXAQqLIJiE9bz9Wz1zbBsjrALYeyqfAbasGFw%3d&risl=&pid=ImgRaw&r=0",
          dogName: "萨摩耶",
        },
      ],
    };
  },
  components: {
    sellDogs,
  },
  methods: {
    likeFn(name) {
      this.likeArr.push(name)
    }
  }
};
</script>

<style>
div {
 display: inline-block;
}
div li {
    list-style: none;
}

</style>
